<table class="table" contenteditable="false">
  <thead>
    <tr>
      <th style="width: 50px">编号</th>
      <th>Host</th>
      <th>Url</th>
      <th>接口类型</th>
      <th>接口参数</th>
      <th>预期结果</th>
      <th>接口信息</th>
    </tr>
  </thead>
{% for case in case_lists %}

  <tbody>
      <tr style="height: 70px;font-weight: 600;font-size: 15px" >
      <td valign="baseline" >{{ loop.index }}</td>
      <form method = "post" action="update_case/{{ case.id }}" id="case_form_{{ loop.index }}">
      <td>
          <div class="post-body">
              <input class="form-control" value='{{ case.host }}' readonly='ture' name="host_{{ loop.index }}" id="host_{{ loop.index }}">
          </div>
      </td>
      <td>
          <div class="post-body">
            <input class="form-control" value='{{ case.url }}' readonly='ture' name="url_{{ loop.index }}" id="url_{{ loop.index }}">
          </div>
      </td>
      <td>
          <div class="post-body">
          <!-- 隐藏input通过jQuery设置value等于select的value -->
          <input name="h{{ loop.index }}" id="h{{ loop.index }}" value='' hidden="hidden">
          <select form="case_form_{{ loop.index }}" disabled="disabled" id="method_{{ loop.index }}" name="method_{{ loop.index }}" class="form-control">
                  {% if case.method==1 %}
                      <option value='1'  >Post</option>
                      <option value='2'  >Get</option>
                  {% elif case.method==2 %}
                      <option value='2'  >Get</option>
                      <option value='1'  >Post</option>
                  {% endif %}
          </select>
          </div>
      </td>
      <td class="post-body">
          <div >
              <input id="parameter_{{ loop.index }}" name="parameter_{{ loop.index }}" class="form-control" readonly='ture'  value={{ case.parameter }}>
          </div>
      </td>
      <td class="post-body">
          <div >
              <input id="expectation_{{ loop.index }}" name="expectation_{{ loop.index }}" class="form-control" readonly='ture'  value={{ case.expectation }}>
          </div>
      </td>
      <td class="post-body">
          <div >
              <input id="depiction_{{ loop.index }}" name="depiction_{{ loop.index }}" class="form-control" readonly='ture'  value={{ case.depiction }}>
          </div>
      </td>
      <td width="60" style="padding-right: 0px;padding-left: 2px;">
              <button type="button" id="edit_{{ loop.index }}" class="btn btn-warning" style="margin-right: 10px" onclick="edit({{ loop.index }})">
                  编辑
              </button>
      </td>
      <td width="60" style="padding-right: 0px;padding-left: 2px;">
              <button type="submit" id="save_{{ loop.index }}" class="btn btn-primary" style="margin-right: 10px" onclick="save({{ loop.index }})">
                  保存
              </button>
      </td>
    </form>
    </tr>
  </tbody>

{% endfor %}
</table>


<script type="text/javascript">

    function edit(id) {
        console.log(id)
            $('#'+'host_'+id).attr("readonly",false);
            $('#'+'url_'+id).attr("readonly",false);
            $('#'+'method_'+id).attr("disabled",false);
            $('#'+'parameter_'+id).attr("readonly",false);
            $('#'+'expectation_'+id).attr("readonly",false);
            $('#'+'depiction_'+id).attr("readonly",false);
//            $('#'+'depiction_'+id).removeClass().addClass("hide_border").attr("readonly",false);
            }

    function save(id) {

            $('#'+'host_'+id).attr("readonly",true);
            $('#'+'url_'+id).attr("readonly",true);
            $('#'+'method_'+id).attr("disabled",true);
            $('#'+'parameter_'+id).attr("readonly",true);
            $('#'+'expectation'+id).attr("readonly",true);
            $('#'+'depiction_'+id).attr("readonly",true);
//获取select的值，赋给隐藏的input，通过隐藏的input传递给给后台
            var ss=$('#'+'method_'+id).val();
            $('#'+'h'+id).attr("value",ss)
            }
</script>